<template>
  <div>
    <!-- <Chart1 /> -->
    <!-- <Chart2 /> -->
    <Chart width="800px" height="400px" :option="option" />
  </div>
</template>

<script lang="ts" setup>
// import Chart1 from "./Chart1.vue";
// import Chart2 from "./Chart2.vue";
import Chart from "./components/Chart.vue";
import type { ECOption } from "./utils/echarts";

function generateData(len: number) {
  const data: number[] = [];
  for (let i = 0; i < len; i++) {
    data.push(Math.round(Math.random() * 900 + 100));
  }
  return data;
}

const option: ECOption = {
  xAxis: {
    data: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      data: generateData(12),
    },
    {
      type: "line",
      data: generateData(12),
    },
  ],
};
</script>

<style scoped lang="scss"></style>
